<template>
  <div class="app-container">
    <el-card shadow="never" class="main-head">
      <div class="main-title" style="font-size: 16px">模板详情</div>
      <div class="main-contianer">
        <div class="card-img"></div>
        <div class="main-msg">
          <div class="msg-name">{{ clearData.templateName }}</div>
          <div class="msg-date">{{ clearData.subDir }}</div>
          <!-- <div class="msg-detail">行数：2048 | 血缘ID：chen | 模版名称：NUMBER001293 | 数据保存位置：/root/software/scckoc/app_plus/data/orig/specy/basic-test_info_tmp_1652835144290.xlsx</div> -->
        </div>
        <div class="main-cz">
          <el-button
            class="add-btn"
            type="danger"
            @click="
              open = true;
              showType = 0;
              openAdd();
            "
            >新增字段</el-button
          >
          <!-- <el-button class="update-btn" @click="showEdit">修改</el-button> -->
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="main-detail">
      <div class="detail-item">
        <div class="item1">列定义：</div>
        <div class="item2">{{ temp }}</div>
      </div>
    </el-card>
    <el-card shadow="never" class="main-tag">
      <div style="display: flex">
        <span>标签：</span>
        <div :class="'card-state' + clearData.pkgId">
          {{ cardName[clearData.id - 1] }}
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="table-card">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ 'font-size': '17px' }"
        style="width: 100%; font-size: 17px"
      >
        <el-table-column
          label="序号"
          type="index"
          width="200"
          fixed
          align="center"
        />
        <el-table-column
          label="字段名称"
          width="300"
          fixed
          align="center"
          prop="name"
        />
        <el-table-column
          label="字段类型"
          width="300"
          fixed
          align="center"
          prop="type"
        />
        <el-table-column
          label="字段长度"
          width="300"
          fixed
          align="center"
          prop="size"
        />
        <el-table-column
          prop="handel"
          label="操作"
          fixed="right"
          width="300"
          align="center"
          style="18vw"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="
                openEdit(scope.row);
                showType = 2;
              "
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="
                openEdit(scope.row);
                showType = 1;
              "
              icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页 -->

    <!-- 新增字段弹窗 -->
    <el-dialog width="480px" :visible.sync="open" class="open-dialog">
      <div class="dialog-body" v-if="showType != 1">
        <div>
          <span>*字段名称:</span>
          <el-input
            type="text"
            placeholder="请输入字段名称"
            clearable
            v-model="ziduanName"
            size="small"
          ></el-input>
        </div>
        <div>
          <span>*字段类型:</span>
          <el-select v-model="ziduanType" placeholder="请输入字段类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <span>*字段长度:</span>
          <el-input
            type="Number"
            placeholder="请输入字段长度"
            clearable
            v-model="ziduanLength"
            :value="ziduanLength"
            size="small"
          ></el-input>
        </div>
      </div>
      <div class="dialog-body" v-else>是否确认删除该模板字段</div>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="open = false">取消</el-button>
        <el-button
          class="commit"
          type="primary"
          @click="showAdd"
          v-if="showType === 0"
          >确定添加</el-button
        >
        <el-button
          class="commit"
          type="primary"
          @click="showDel"
          v-else-if="showType === 1"
          >确定删除</el-button
        >
        <el-button
          class="commit"
          type="primary"
          v-else-if="showType === 2"
          @click="showEdit"
          >确定修改</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改弹窗 -->
  </div>
</template>

<script>
import {
  listTemplateColumn,
  changeMd,
  DelTemplate,
  addTemplate,
  editTemplate,
} from "@/api/burnPower/interface";
export default {
  name: "dataInputDetail",
  data() {
    return {
      cardName: [
        "物种",
        "动力学",
        "实验高温热物性",
        "",
        "",
        "热力学",
        "层级火焰",
        "点火延迟",
        "输运",
        "物种浓度",
        "其他",
      ],
      temp: [], //列定义
      index: null,
      clearData: {},
      tableData: [],
      datatotal: null, //底部数据总数
      pageSize: 10,
      page: 1,
      row: {},
      rel: "0",
      showType: 0,
      cardState: ["物种", "热力学", "动力学", "化源网", "元数据", "热物性"],
      open: false,
      openWay: "",
      options: [
        {
          value: "选项1",
          label: "String",
        },
        {
          value: "选项2",
          label: "Int",
        },
        {
          value: "选项3",
          label: "Char",
        },
        {
          value: "选项4",
          label: "Double",
        },
        {
          value: "选项5",
          label: "Data",
        },
      ],

      ziduanName: "",
      ziduanType: "",
      ziduanLength: "255",
    };
  },
  created() {
    this.clearData = this.$route.query;
    this.getColumn();
    console.log("openWay:" + this.openWay);
  },
  mounted() {
    console.log("tableData", this.tableData);
    console.log("clearData", this.clearData);
  },
  methods: {
    getColumn() {
      listTemplateColumn(this.clearData.id).then((res) => {
        this.temp = res.data;
        this.tableData = [];
        console.log("temp", this.temp);
        for (let k in this.temp) {
          this.tableData.push({
            id: this.tableData.length + 1,
            name: k.split("|")[0],
            type: this.temp[k],
            size: k.split("|")[1] != undefined ? k.split("|")[1] : "255",
          });
        }
        console.log("after", this.tableData);
      });
    },
    getheaderMsg() {
      if (this.headerMsg.length == 0) {
        for (const key in this.tableData[0]) {
          this.headerMsg.push(key);
        }
      }
      console.log(this.headerMsg, "22222");
      if (this.field.length == 0) {
        for (const key in this.tableData[0]) {
          this.field.push({
            value: key,
            label: key,
          });
        }
      }
    },
    getClearData() {
      getTableList(this.clearData.id, this.page, this.pageSize).then((res) => {
        this.tableData = res.data;
        console.log("this.tableData", this.tableData);

        this.datatotal = Number.parseInt(res.data[res.data.length - 1].total);
        this.getheaderMsg();
        console.log("header", this.headerMsg);
      });
    },

    showAdd() {
      //新增字段方法触发
      console.log("新增字段:触发方法");

      let templateId = parseInt(this.clearData.id);

      let field = this.ziduanName;
      let fieldType = this.ziduanType;
      let fieldSize = this.ziduanLength;

      console.log("打印类型和值" + field + typeof field);
      console.log("打印类型和值" + fieldType + typeof fieldType);
      console.log("打印类型和值" + fieldSize + typeof fieldSize);

      addTemplate(templateId, field, fieldType, fieldSize).then(() => {
        this.getColumn();
        this.open = false;
      });
    },

    showEdit() {
      //修改字段方法触发

      console.log("修改 字段:触发方法");
      let templateId = parseInt(this.clearData.id);
      let field = this.ziduanName;
      let fieldType = this.ziduanType;
      let fieldSize = this.ziduanLength;
      let schemaid = this.row.id - 1;
      console.log(this.clearData);
      editTemplate(templateId, field, fieldType, fieldSize, schemaid).then(
        () => {
          this.getColumn();
          this.open = false;
        }
      );
    },

    showDel() {
      //删除字段方法触发
      console.log("删除字段:触发方法", this.row.id);
      let templateId = parseInt(this.clearData.id);
      let field = this.ziduanName;
      let fieldType = this.ziduanType;
      let fieldSize = this.ziduanLength;
      let schemaid = this.row.id - 1;
      DelTemplate(templateId, field, fieldType, fieldSize, schemaid).then(
        () => {
          this.getColumn();
          this.open = false;
        }
      );
    },
    forceRerender() {
      this.tableData.length;
    },

    //点击按钮赋值参数
    openEdit(row) {
      this.open = true;
      this.showType = 1;
      console.log("row", row);

      this.row = row;
      this.ziduanName = row.name;
      this.ziduanType = row.type;
      this.ziduanLength = row.size;
    },

    // 重置参数
    openAdd() {
      this.ziduanName = null;
      this.ziduanType = null;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 14px 16px;
}
.main-head {
  position: relative;
  min-width: 1152px;
  margin: 0 1.5rem 0.6875rem 0;
  height: 120px;
  background: #ffffff;
  border-radius: 8px;
  opacity: 1;
  .main-title {
    // position: absolute;
    // top: 14px;
    font-size: 14px;

    font-weight: 400;
    color: #999999;
    line-height: 14px;
  }
  .main-contianer {
    margin-top: 13px;
    .card-img {
      display: inline-block;
      width: 32px;
      height: 32px;
      margin-right: 7px;
      background: url("./inputIcon.png");
      background-size: cover;
    }
    .main-msg {
      display: inline-block;
      vertical-align: top;
      .msg-name {
        height: 18px;
        font-size: 20px;

        font-weight: bold;
        color: #333333;
        line-height: 17px;
        margin-bottom: 8px;
      }
      .msg-date {
        height: 16px;
        font-size: 16px;
        font-weight: 300;
        color: #999999;
        line-height: 15px;
        margin-bottom: 8px;
      }
      .msg-detail {
        margin-top: 3px;
        height: 18px;
        font-size: 16px;

        font-weight: 400;
        color: #666666;
        line-height: 15px;
      }
    }
    .main-cz {
      display: inline-block;
      position: absolute;
      right: 20px;
      .add-btn {
        padding: 0;
        width: 96px;
        height: 31px;
        margin-right: 30px;
        background: #bd4541;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #bd4541;
        font-size: 14px;
        font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
        font-weight: 400;
        color: #ffffff;
      }
      .update-btn {
        padding: 0;
        width: 96px;
        height: 31px;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid #bd4541;
        font-size: 14px;
        font-family: PuHuiTi;
        font-weight: 400;
        color: #bd4541;
      }
    }
  }
}
.main-detail {
  min-width: 1152px;
  margin: 0 1.5rem 0.6875rem 0;
  // height: 611px;
  background: #ffffff;
  border-radius: 8px;
  margin-top: 16px;
  .detail-item {
    display: flex;
    .item1 {
      width: 80px;
      text-align: right;
      flex-shrink: 0;
      margin-bottom: 19px;
      font-size: 18px;
      font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
      font-weight: 400;
      color: #333333;
    }
    .item2 {
      width: 660px;
      font-size: 16px;
      font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
      font-weight: 400;
      color: #666666;
    }
  }
}
.main-tag {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 1152px;
  margin: 0 1.5rem 0.6875rem 0;
  // height: 611px;
  background: #ffffff;
  border-radius: 8px;
  margin-top: 16px;
  span {
    font-size: 16px;
    font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
    font-weight: 400;
    color: #333333;
  }
  .card-state {
    &1 {
      width: 52px;
      height: 24px;
      font-size: 16px;
      background: #f5fff6;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #479706;
      line-height: 24px;
    }
    &2 {
      width: 64px;
      height: 24px;
      font-size: 16px;
      background: #fff9f5;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #ff7c24;
      line-height: 24px;
    }
    &3 {
      width: 100px;
      height: 24px;
      font-size: 16px;
      background: #f5f8ff;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #2b40ff;
      line-height: 24px;
    }
    &4 {
      width: 130px;
      height: 24px;
      font-size: 16px;
      background: #f7f5ff;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #8146ff;
      line-height: 24px;
    }
    &5 {
      width: 64px;
      height: 24px;
      font-size: 16px;
      background: #fff5f7;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #ff5084;
      line-height: 24px;
    }
    &6 {
      width: 64px;
      height: 24px;
      font-size: 16px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #dc322f;
      line-height: 24px;
    }
    &7 {
      width: 64px;
      height: 24px;
      font-size: 16px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #ffff80;
      line-height: 24px;
    }
    &8 {
      width: 64px;
      height: 24px;
      font-size: 16px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #f59a23;
      line-height: 24px;
    }
    &9 {
      width: 64px;
      height: 24px;
      font-size: 16px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #02a7f0;
      line-height: 24px;
    }
  }
}
.table-card {
  min-width: 1152px;
  margin: 0 1.5rem 0.6875rem 0;
  // height: 611px;
  background: #ffffff;
  border-radius: 8px;
  margin-top: 16px;
}

.open-dialog {
  ::v-deep .el-dialog {
    // height: 300px;
    border-radius: 10px;
    &__body {
      // height: 360px;
      padding: 10px 38px 10px 38px;
    }
    &__header {
      padding: 33px 38px 10px 38px;
    }
    &__footer {
      padding: 30px 38px 20px 38px;
    }
  }
  .dialog-body {
    span {
      font-size: 14px;
      font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
      font-weight: 400;
      color: #999999;
      display: inline-block;
    }
    ::v-deep .el-input {
      display: inline-block;
      width: 168px;
      margin-bottom: 16px;
      margin-left: 14px;
      &__inner {
        font-size: 14px;
        font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
        font-weight: 400;
        // color: #CCCCCC;
        width: 168px;
        height: 31px;
        border-radius: 5px;
        opacity: 1;
        border: 1px solid #eeeeee;
      }
    }
    ::v-deep .el-radio {
      font-size: 14px;
      font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
      font-weight: 400;
      //从这里开始 就是更改颜色的代码
      .el-radio__label {
        color: #999999 !important;
        margin-right: 1.0625rem;
      }
      &.is-checked {
        .el-radio__label {
          color: #333333 !important;
        }
      }
      .el-radio__input {
        margin-bottom: px(5);
        &.is-checked {
          .el-radio__inner {
            background: #bd4541;
            border-color: #bd4541;
          }
        }
        .el-radio__inner {
          &:hover {
            border-color: #bd4541;
          }
        }
      }
    }
  }
  .dialog-footer {
    // margin-top: 37px;
    .cancel {
      border: 0;
      height: 31px;
      font-size: 14px;
      padding: 0 10px;
      font-weight: 400;
      color: #666666;
    }
    .commit {
      width: 128px;
      height: 31px;
      font-size: 14px;
      padding: 0;
      font-weight: 400;
      color: #ffffff;
      // line-height: 31px;
      background: #bd4541;
      border-radius: 4px;
      border: 0;
    }
  }
}
</style>
